<template>
	<view>
		<input v-model="searchKeyword" placeholder="请输入合同名称或合同编号" class="search-input" />
		<view class="news-content" :class="[anmations === 'animation-slide-bottom' ? 'animation-slide-bottom' : '']">
			<view class="news-box" v-for="item in list" :key="item.id" @click="details(item)">
				<view class="news-title">
					{{ item.contractCode }}
				</view>
				<!-- <text class="bgcolor">{{item.processStatusDictText != undefined ? item.processStatusDictText:'已通过'}}</text> -->
				<view class="news-title">
					{{ item.contractName }}
				</view>
				<view class="news-time">
					{{item.createUserName}} {{item.userDepartName}}
					<span class="right-content">{{ item.createTime.split(' ')[0] }}</span>
				</view>

			</view>
		</view>
		<view class="info-box" style="border:none" v-if="list.length > 0" @click="loadMore">
			<view class="box-nofooter" style="text-align: center;line-height: 50rpx;">
				{{ total > list.length ? '点击加载更多！' : '' }}
			</view>
		</view>
		<button v-if="showBackToTop" @click="scrollToTop" class="back-to-top">
			Top
		</button>
	</view>
</template>

<script>
	import {
		queryNewsLast
	} from '../../api/service.js'; // 导入接口
	import {
		debounce
	} from 'lodash'; // 引入 lodash 的 debounce 方法

	export default {
		props: ['isApproved'],
		data() {
			return {
				anmations: '',
				list: [],
				crruentType: null,
				searchKeyword: '',
				currentPageNo: 1,
				total: '',
				queryParam: {
					pageNo: 1,
					pageSize: 11,
					projectId: ''
				},
				showBackToTop: false, // 控制按钮显示
			};
		},
		watch: {
			isApproved(newval) {
				this.list = [];
				this.crruentType = newval;
				this.getNewsList();
			},
			searchKeyword: function(newVal) {
				this.debouncedGetNewsList(); // 调用防抖后的方法
			}
		},
		mounted() {
			this.anmations = 'animation-slide-bottom';
			this.crruentType = this.isApproved;
			this.debouncedGetNewsList = debounce(this.getNewsList, 300); // 设置防抖时间为 300ms
			this.getNewsList();

			// 监听滚动事件
			window.addEventListener('scroll', this.handleScroll);
		},
		beforeDestroy() {
			// 移除滚动事件监听
			window.removeEventListener('scroll', this.handleScroll);
		},
		methods: {
			handleScroll() {
				// 获取当前滚动位置
				const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				this.showBackToTop = scrollTop > 300; // 超过300px时显示按钮
			},
			loadMore() {
				// 数据待到总数一致时候停止在加载
				if (this.list.length >= this.total) {
					// uni.
				} else {
					this.currentPageNo++;
					this.queryParam.pageSize = this.currentPageNo * 10;
					this.getNewsList(true); // 传入参数 true 表示追加数据
				}
			},
			async getNewsList(append = false) { // 添加一个参数 append，默认为 false
				uni.showLoading({
					title: '数据加载中'
				});

				this.isLoading = true;
				try {
					const res = await queryNewsLast({
						contractName: this.searchKeyword.toLowerCase(),
						isApproved: this.isApproved,
						entityType: 'HT',
						pageNo: this.queryParam.pageNo,
						pageSize: this.queryParam.pageSize,
					});

					if (res.success) {
						uni.hideLoading(); // 隐藏加载提示
						this.total = res.result.contracts.total;
						if (append) {
							this.list = this.list.concat(res.result.contracts.records); // 将新数据追加到现有数据的末尾
						} else {
							this.list = res.result.contracts.records;
						}
					} else {
						uni.showToast({
							title: "数据加载失败！",
							duration: 2000
						});
					}
				} catch (error) {
					console.error("获取数据失败:", error);
				} finally {
					this.isLoading = false;
				}
			},

			details(item) {
				console.log('状态' + this.crruentType);
				console.log('pid' + item.processId);
				uni.navigateTo({
					url: '../component/query-custom/news-module?id=' + item.id + '&title=' + item.contractName +
						'&isApprove=' + this.crruentType + '&pId=' + item.processId + '&processStatus=' + item
						.processStatus
				});
			},
			scrollToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300,
				});
				this.showBackToTop = false; // 点击后隐藏按钮
			}
		}
	};
</script>

<style lang="scss">
	@import "../../colorui/animation.css";

	.search-input {
		width: 100%;
		height: 70rpx;
		padding: 0 15rpx;
		border: 1rpx solid #ccc;
		border-radius: 5rpx;
		font-size: 26rpx;
		color: #333;
		background-color: #f9f9f9;
		box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
		transition: border-color 0.3s, background-color 0.3s;
		margin-bottom: 10rpx;
		margin-top: 10rpx;
	}

	.search-input:focus {
		border-color: #007bff;
		background-color: #fff;
		outline: none;
	}

	.news-content {
		display: flex;
		flex-direction: column;
		padding: 26rpx;
		justify-content: center;

		.news-box {
			flex: 1;
			border-bottom: 2rpx solid #EBEBEB;
			margin-bottom: 10rpx;
			width: 100%;
			height: auto;

			&:last-child {
				border-bottom: none;
			}

			.news-title {
				min-height: 46rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				line-height: 36rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-bottom: 2rpx;
			}

			.news-time {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 4rpx;
			}

			.news-time .right-content {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				line-height: 32rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

		}

		.bgcolor {
			background: #eeeeee;
			color: #ff80ff;
			display: inline-block;
			min-height: 46rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			line-height: 36rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-bottom: 0rpx;
		}

		.news-title {
			min-height: 46rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			line-height: 36rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-bottom: 2rpx;
		}
	}

	.back-to-top {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #00aaff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		right: 70rpx;
		bottom: 150rpx;
		text-align: center;
		color: #FFFFFF;
		cursor: pointer;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
		transition: background-color 0.3s, transform 0.3s;
	}
</style>